<template>
  <div>
    <div style="box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.1), 0 2px 4px 0 rgba(0, 0, 0, 0.1);
    width:90vn" ref="gsBox">
    <div class="codetext">渐变动画</div>
    <div style="padding:8px 10px;display:flex;flex-direction: row;">
      <gs-date style="width:350px;margin:10px"  gsStyle="info" v-model="str" trends="gscenter" placeholder="请选择类型"></gs-date>
    </div>
    <div class="codetext">淡出动画</div>
    <div style="padding:8px 10px;display:flex;flex-direction: row;">
      <gs-date style="width:350px;margin:10px"  gsStyle="success" v-model="str1" trends="gsopacity" ></gs-date>
    </div>
    <div class="codetext">下拉动画</div>
    <div style="padding:8px 10px;display:flex;flex-direction: row;">
      <gs-date style="width:350px;margin:10px" gsStyle="primary" v-model="str2" trends="drop" ></gs-date>
    </div>
    <div class="codetext">禁用</div>
    <div style="padding:8px 10px;display:flex;flex-direction: row;">
      <gs-date style="width:350px;margin:10px" gsStyle="primary" disabled v-model="str3" trends="drop" ></gs-date>
    </div>
    <div class="codetext">格式化yyyy/mm/dd</div>
    <div style="padding:8px 10px;display:flex;flex-direction: row;">
      <gs-date style="width:350px;margin:10px" gsStyle="warning" format="yyyy/mm/dd" v-model="str4" ></gs-date>
    </div>
    <!--  -->
    <pre class="code">
      <span class="codetitle">使用disabled定义是否禁用</span>
      <span class="codetitle">使用gsStyle定义风格一共八种风格 dark,primary, success, warning, danger, info,round,while</span>
      <span class="codetitle">使用trends定义动画效果</span>
      <span class="codetitle">使用placeholder提示</span>
      <span class="codetitle">使用format会格式化value</span>
      <gs-code title="gs-date" attr=' gsStyle="primary" v-model="str" trends="drop" format="yyyy/mm/dd" placeholder="请选择类型"'></gs-code>
  
    </pre>
    </div>
  </div>
</template>
<script>
import gsDate from "../components/date/date";
import gsCode from "./code";
export default {
  name: 'vSelect',
  components: {
    gsCode,
    gsDate
  },
  data(){
    return {
      str:"",
      str1:"",
      str2:"",
      str3:"",
      str4:"",
    }
  },
  methods:{
    click(){
      this.$emit("click",arguments)
    },
  },
}
</script>
